<template>
	<view class="w-bottom-safe" :style="{
					'padding-bottom': `${height}rpx`,
					'padding-bottom': `calc(${height}rpx + constant(safe-area-inset-bottom))`,
					'padding-bottom': `calc(${height}rpx + env(safe-area-inset-bottom))`
				}">

	</view>
</template>
<script>
	export default {
		props: {
			height: {
				type: [String, Number],
				default: 120
			}
		},
		data() {
			return {

			}
		},
		computed: {
			style() {
				let height = this.height + 'rpx';
				let style = {
					'padding-bottom': `${height}`,
					'padding-bottom': `calc(${height} + constant(safe-area-inset-bottom))`,
					'padding-bottom': `calc(${height} + env(safe-area-inset-bottom))`
				}
				return style
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.w-bottom-safe {
		padding-bottom: 120rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}
</style>